<!--/**
* Author: ganqz
* Date: 2022-07-30 19:25
* Desc: FollowPublic
*/
-->
<template>
  <view
    class="follow-publick flex flex-m"
    :class="'display-style-' + info.displayStyle"
    v-if="displayStyle"
  >
    <view class="flex-1" v-if="info.displayStyle == '1'">{{
      info.content
    }}</view>
    <view class="display-style-2 flex-1 flex" v-if="info.displayStyle == '2'">
      <view class="flex-1 flex">
        <view class="flex-1">
          <view class="fs32">{{ info.name }}</view>
          <view class="ellipsis fc9 desc">{{ info.content }}</view>
        </view>
      </view>
    </view>
    <view class="ml10 follow-btn" @click="onFollow">关注</view>
    <public-pop v-model="showPop" v-if="showPop" :info="info"></public-pop>
  </view>
</template>
<script>
  import PublicPop from './PublicPop.vue'
  import { mapGetters } from 'vuex'
  export default {
    name: 'follow-public',
    components: { PublicPop },
    data() {
      return {
        showPop: false,
        info: {
          displayStyle: '0',
          content: '引导关注文字',
          image: 'qrcod',
          name: 'ceshi'
        }
      }
    },
    mounted() {
      // this.init()
    },
    computed: {
      ...mapGetters(['cinemaId']),
      displayStyle() {
        return +this.info.displayStyle
      }
    },
    methods: {
      init() {
        this.getSet()
      },
      onFollow() {
        this.showPop = true
      },
      getSet() {
        uni.$api.channel
          .getOfficialAccountSet({ cinemaId: this.cinemaId })
          .then((res) => {
            this.info = res
          })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .follow-publick {
    padding: 0 15rpx;
    background: #fffbe3;
    .follow-btn {
      width: 80rpx;
      height: 40rpx;
      line-height: 40rpx;
      background: $yellow;
      color: #fff;
      border-radius: 10rpx;
      text-align: center;
    }
    &.display-style-1 {
      color: $yellow;
      font-size: 22rpx;
      height: 60rpx;
      line-height: 60rpx;
    }
    &.display-style-2 {
      color: $yellow;
      font-size: 22rpx;
      padding: 10rpx 15rpx;
      .desc {
        color: lighten($yellow, 10%);
      }
    }
    .qr-code-img {
      width: 170rpx;
      height: 170rpx;
    }
  }
</style>
